<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>我的-18001010319-方弘轩</title>
    <link rel="stylesheet" href="./comment/iconfont.css">
    <link rel="stylesheet" href="./myicon/iconfont.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <link rel="stylesheet" href="./color-icon.css">
    <style>
        body{
            min-width: 320px;
            margin: 0;
            padding: 0;
        }
        div,p,ul,li,a{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }
        img{
            border: none;
        }
        #top{
            position: fixed;
            top: -100PX;
            height: 30px;
            padding-bottom: 10px;
            padding-top: 5px;
            width: 100%;
            background-color: #fff;
            z-index: 105;
            transition: all 500ms;
        }
        #top>div>a{
            background-color: rgb(226, 224, 224);
        }

        #father{
            position: relative;
            background-color: rgb(241, 233, 233);
            height: 1115px;
        }
        #foot {
            display: flex;
            align-content: center;
            height: 50px;
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: #fff;
            z-index: 100;
        }
        #foot li{
            width: 23%;
            text-align: center;
            align-content: center;
            margin-top: 3px;
        }
        #foot li span{
            font-size: 25px;
            color: rgb(75, 75, 75);
        }
        #foot li span p{
            font-size: 13px;
        }
        #header{
            background-color: rgb(173, 144, 252);
            width: 100%;
            height: 150px;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px;
        }
        .top{
            padding: 5px;
            display: flex;
        }
        .top a{
            width: 85vw;
            text-align: center;
            background-color: rgb(109, 119, 202);
            color: rgb(131, 221, 224);
            border-radius: 5px;
            margin: 0 15px 0 15px;
        }
        .top span{
            flex-wrap: 1;
            margin-right: 5px;
        }
        .zy{
            width: 90%;
            height: 100px;
            background-color: #fff;
            margin-left: 5vw;
            margin-top: 20px;
            border-radius: 10px;
            padding-bottom: 10px;
        }
        .zy img{
            width: 45px;
            border-radius: 25px;
            margin: 5px;
        }
        .first{
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .first>div:nth-child(1){
            flex-wrap: 5;
        }
        .first>div p:nth-child(1){
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .first>div p:nth-child(2){
            border-radius: 10px;
            background-color: rgb(195, 195, 255);
            color: rgb(35, 106, 236);
            font-size: 8px;
            height: 20px;
            line-height: 20px;
        }
        .grzy{
            height: 100%;
            font-size: 14px;
            font-weight: bold;
            color: darkcyan;
            text-align: right;
        }
        .first>div{
            width: 38vw;
        }
        .second{
            display: flex;
        }
        .second div{
            width: 30%;
            text-align: center;   
        }
        .second>div>p:nth-child(1){
            font-weight: bold;
            font-size: 16px;
        }
        .second>div>p:nth-child(2){
            font-size: 10px;
            border-right: 1px solid #ccc;
        }
        .second div:last-child p:last-child{
            border: none;
        }
        .bottom{
            background-color: gold;
            height: 50px;
            width: 90%;
            margin-left: 5vw;
            display: flex;
            align-items: center;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .bottom>div:nth-child(1){
            width: 75%;
        }
        .bottom>div:nth-child(2){
            width: 25%;
            text-align: center;
            background-color: rgb(161, 194, 101);
            border-radius: 10px;
            margin-right: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        .bottom>div>p:nth-child(1){
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
        }
        .bottom>div>p:nth-child(2){
            font-size: 10px;
            margin-left: 10px;
        }
        .items {
            display: flex;
            align-content: center;
            height: 50px;
            width: 100%;
            background-color: #fff;

        }
        .items>li{
            width: 30%;
            text-align: center;
            align-content: center;
            margin-top: 3px;
        }
        .items>li>span{
            font-size: 25px;
        }
        .items li p{
            font-size: 10px;
        }
        #items{
            width: 90%;
            margin-top: 10px;
            border-radius: 5px;
            background-color: #fff;
            margin-left: 5vw;
            padding: 3px;
        }
        #kong{
            height: 185px;
        }
        .duan{
            margin-left: 15px;
            margin-right: 15px;
        }
        .duan span:nth-child(1){
            font-weight: bold;
            font-size: 15px;
        }
        .duan span:nth-child(2){
            font-size: 13px;
            float: right;
            color: dodgerblue;
        }
        .czzx{
            width: 100%;
            background-color: #fff;
            height: 130px;
            margin-top: 10px;
        }
        .title{
            padding: 8px;
            margin: 5px;
            height: 20px;
            line-height: 20px;
        }
        .title span:nth-child(1){
            font-size: 15px;
        }
        .title span:nth-child(2){
            font-size: 14px;
        }  
        .title span:nth-child(3){
            float: right;
            font-size: 10px;
            color: darkcyan;
        }
        .zw{
            display: flex;
            align-items: center;
        }
        .zw div{
            width: 60%;
            text-align: center;
            margin-top: 10px;
            color: darkcyan;
            font-size: 13px;
        }
        .zw div p:nth-child(2){
            font-weight: bold;
            font-size: 15px;
        }
        .zw div:nth-child(1){
            border-right: 1px solid #ccc;
        }
        .shiping{
            width: 100%;
            background-color: #fff;
            height: 130px;
            margin-top: 10px;
        }
        .nr img{
            width: 50px;
            height: 50px;
            border-radius: 5px;
            margin: 3px;
            margin-left: 15px;
        }
        .nr div:nth-child(1){
            display: flex;
            align-items: center;
        }
        .nr div:nth-child(1) p{
            font-weight: bold;
            font-size: 14px;
        }
        .nr div:nth-child(2){
            display: flex;
            align-items: center;
            font-size: 10px;
            margin-left: 15px;
        }
        .nr div:nth-child(2) p:nth-child(1){
            width: 75%;
            color: darkcyan;
        }
        .nr div:nth-child(2) p:nth-child(3){
            width: 60px;
            text-align: center;
            height: 25px;
            line-height: 25px;
            background-color: rgb(227, 111, 231);
            border-radius: 5px;
        }
        .as img{
            width: 50px;
            height: 50px;
            border-radius: 10px;
            margin-left: 10px;
            margin-right: 20px;
        }
        .as p{
            width: 50px;
            font-size: 12px;
            color: darkcyan;
            margin-left: 10px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="top">
        <div class="top">
            <span class="iconfont icon-richscan_icon-copy"></span>
            <a href="./ss.html"><span class="iconfont icon-sousuo1"></span> &nbsp;搜索知乎内容</a>
            <span class="iconfont icon-yueliang"></span>
            <span class="iconfont icon-shezhi"></span>
        </div>
    </div>
    <div id="header">
        <div class="top">
            <span class="iconfont icon-richscan_icon-copy"></span>
            <a href="./ss.html"><span class="iconfont icon-sousuo1"></span> &nbsp;搜索知乎内容</a>
            <span class="iconfont icon-yueliang"></span>
            <span class="iconfont icon-shezhi"></span>
        </div>
        <div class="zy">
            <div class="first">
                <img src="images/tx2.jpg" >
                <div>
                    <p>一个人</p>
                    <p><span class="iconfont icon-xihuan"></span>知乎盐值：321 ﹥</p>
                </div>
                <div class="grzy">个人主页 ﹥</div>
            </div>

            <div class="second">
                <div>
                    <p>2</p>
                    <p>创作中心</p>
                </div>
                <div>
                    <p>90</p>
                    <p>关注</p>
                </div>
                <div>
                    <p>6</p>
                    <p>收藏夹</p>
                </div>
                <div>
                    <p>70</p>
                    <p>最近浏览</p>
                </div>
            </div>
        </div>

        <div class="bottom">
            <div>
                <p>盐选会员年卡 5 折</p>
                <p>买一年再送一年 </p>
            </div>
            <div>
                立即购买
            </div>
        </div>

        <div id="items">
            <ul class="items">
            <li>
                <span class="iconfont icon-ziyuan22"></span>
                <p>书架</p>
            </li>
            <li>
                <span class="iconfont icon-yigou"></span>
                <p>已购</p>
            </li>
            <li>
                <span class="iconfont icon-fufeizixun"></span>
                <p>付费咨询</p>
            </li>
            <li>
                <span class="iconfont icon-huodongguangchang"></span>
                <p>活动广场</p>
            </li>
        </ul>
        <ul class="items">
            <li>
                <span class="iconfont icon-qianbao"></span>
                <p>钱包</p>
            </li>
            <li>
                <span class="iconfont icon-shequ"></span>
                <p>社区共建</p>
            </li>
            <li>
                <span class="iconfont icon-fankuiyubangzhu"></span>
                <p>反馈与帮助</p>
            </li>
            <li>
                <span class="iconfont icon-yaoqingdehongbao"></span>
                <p>邀新得红包</p>
            </li>
        </ul>
        </div>
        
    </div>

    <div id="kong"></div>

    <div class="duan">
        <span>我的卡片</span> <span>+ 管理卡片</span>
    </div>

    <div class="czzx">
        <div class="title">
            <span class="iconfont icon-xiehuida"></span>
            <span>创作中心</span>
            <span>有新权益待开启 ﹥ </span>
        </div>
        <div class="zw">
            <div>
                <p>昨日被阅读数</p>
                <p>0</p>
                <p>较前日 --</p>
            </div>
            <div>
                <p>昨日获赞数</p>
                <p>0</p>
                <p>较前日 --</p>
            </div>
        </div>
    </div>

    <div class="shiping">
        <div class="title">
            <span class="iconfont icon-zhibo-"></span>
            <span>视频</span>
        </div>

        <div class="swiper-container" id="tnav">
            <div class="swiper-wrapper">
              <div class="swiper-slide nr">
                  <div>
                       <img src="images/nr5.jpg">
                       <p>我的2020，你会如何总结这一年?</p>
                  </div>
                  <div>
                      <p>2064 视频 · 527万播放</p>
                      <p></p>
                      <p>拍视频</p>
                  </div>
              </div>
              <div class="swiper-slide nr">
                <div>
                     <img src="images/nr1.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr5.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr3.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr4.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            </div>
            <!-- Add Pagination -->
          </div>
    </div>

    <div class="shiping">
        <div class="title">
            <span class="iconfont icon-ganxingquweixuanzhong"></span>
            <span>你可能感兴趣的圈子</span>
            <span>去圈子广场 ﹥</span>
        </div>
        <div class="swiper-container" id="fnav">
            <div class="swiper-wrapper">
                <div class="swiper-slide as">
                    <img src="images/nr3.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr5.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr6.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr4.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr3.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr2.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr7.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr6.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr5.jpg">
                    <p>不好笑算我输</p>
                </div>
                <div class="swiper-slide as">
                    <img src="images/nr4.jpg">
                    <p>不好笑算我输</p>
                </div>

            </div>
            <!-- Add Pagination -->
          </div>
        
    </div>

    <div class="shiping">
        <div class="title">
            <span class="iconfont icon-yuanzhuo"></span>
            <span>圆桌</span>
            <span>查看更多 ﹥</span>
        </div>

        <div class="swiper-container" id="mnav">
            <div class="swiper-wrapper">
              <div class="swiper-slide nr">
                  <div>
                       <img src="images/nr6.jpg">
                       <p>我的2020，你会如何总结这一年?</p>
                  </div>
                  <div>
                      <p>2064 视频 · 527万播放</p>
                      <p></p>
                      <p>拍视频</p>
                  </div>
              </div>
              <div class="swiper-slide nr">
                <div>
                     <img src="images/nr1.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr2.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr3.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr4.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            </div>
            <!-- Add Pagination -->
          </div>
    </div>

    <div class="shiping">
        <div class="title">
            <span class="iconfont icon-zhuanti"></span>
            <span>专题</span>
            <span>查看更多 ﹥</span>
        </div>

        <div class="swiper-container" id="lnav">
            <div class="swiper-wrapper">
              <div class="swiper-slide nr">
                  <div>
                       <img src="images/nr6.jpg">
                       <p>我的2020，你会如何总结这一年?</p>
                  </div>
                  <div>
                      <p>2064 视频 · 527万播放</p>
                      <p></p>
                      <p>拍视频</p>
                  </div>
              </div>
              <div class="swiper-slide nr">
                <div>
                     <img src="images/nr2.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr3.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr3.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            <div class="swiper-slide nr">
                <div>
                     <img src="images/nr4.jpg">
                     <p>我的2020，你会如何总结这一年?</p>
                </div>
                <div>
                    <p>2064 视频 · 527万播放</p>
                    <p></p>
                    <p>拍视频</p>
                </div>
            </div>
            </div>
            <!-- Add Pagination -->
          </div>
    </div>

    <ul id="foot">
        <li><span class="iconfont icon-jishiben"><p>首页</p> </span></li>
        <li><span class="iconfont icon-huiyuan1"><p>会员</p> </span></li>
        <li><span class="iconfont icon-faxian2"><p>发现</p> </span></li>
        <li><span class="iconfont icon-xiaoxi"><p>消息</p> </span></li>
        <li><span class="iconfont icon-wode2"><p>我的</p> </span></li>
    </ul>

</div>



    <script src="./swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('#tnav', {
          slidesPerView: 1.15,
          spaceBetween: 10,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        });
    </script>
    <script>
        var swiper = new Swiper('#mnav', {
          slidesPerView: 1.15,
          spaceBetween: 10,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        });
    </script>
    <script>
        var swiper = new Swiper('#lnav', {
          slidesPerView: 1.15,
          spaceBetween: 10,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        });
    </script>
    <script>
        var swiper = new Swiper('#fnav', {
          slidesPerView: 5.5,
          spaceBetween: 10,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        });
    </script>
    <script>
        window.onscroll=function(){
            var h=header.offsetHeight;
            var st=document.documentElement.scrollTop||document.body.scrollTop;
            var top=document.getElementById("top");
            console.log(st);
            if(st>h){
                top.style.top="0";
            }else {
                top.style.top="-1000PX";
            }

        }
    </script>
</body>
</html>